<template>
  <div>
    <div class="apply-type apply-contract" v-if="applyType === 2">
      <i class="icon"></i>
      <span>合同申请</span>
    </div>
    <div class="apply-type apply-leave" v-else-if="applyType === 1">
      <i class="icon"></i>
      <span>请假申请</span>
    </div>
    <div class="apply-type apply-secret" v-else-if="applyType === 3">
      <i class="icon"></i>
      <span>保密申请</span>
    </div>
    <div class="apply-type apply-key" v-else-if="applyType === 4">
      <i class="icon"></i>
      <span>密钥申请</span>
    </div>
    <div class="apply-type apply-hol-leave" v-else-if="applyType === 5">
      <i class="icon"></i>
      <span>例假申请</span>
    </div>
    <div class="apply-type apply-fdh" v-else-if="applyType === 6">
      <i class="icon"></i>
      <span>付外佣申请</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ApplyType',
    data () {
      return {
      };
    },
    props: ['applyType']
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .apply-type{
    position: relative;
    margin-top: getRem(10);
    &.apply-rebate{
      .icon{
        display: block;
        position: absolute;
        width: getRem(48);
        height: getRem(44);
        background: url(../../assets/images/icon-rebate.png) no-repeat center center;
        background-size: getRem(48) getRem(44);
      }
      span{
        display: inline-block;
        padding-left: getRem(63);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(bottom,#fc9401,#f7a008,#f4b42e); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-leave{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/icon-leave.png) no-repeat center center;
        background-size: getRem(42) getRem(46);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(bottom,#3ecba7,#4fdbb3,#5febbf); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-secret{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/secrecy_icon@3x.png) no-repeat center center;
        background-size: getRem(42);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(bottom,#1da9fe,#17adff,#0cb4ff); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-key{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/secret-key_icon@3x.png) no-repeat center center;
        background-size: getRem(42);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(90deg,#ff4968,#fd9fb7); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-contract{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/contract_icon@3x.png) no-repeat center center;
        background-size: getRem(42);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(right,#fe6dfe,#e86dfe,#d26dfe); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-hol-leave{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/icon-hol-leave@3x.png) no-repeat center center;
        background-size: getRem(42);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(right,#b86dfe,#a755f3,#aa55f0); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    &.apply-fdh{
      .icon{
        display: block;
        position: absolute;
        width: getRem(42);
        height: getRem(46);
        background: url(../../assets/images/icon-fdh.png) no-repeat center center;
        background-size: getRem(42);
      }
      span{
        display: inline-block;
        padding-left: getRem(57);
        line-height: getRem(46);
        background-image: -webkit-linear-gradient(right,#f1652470,#f1841d,#eea34e); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
      }
    }
    
  }
</style>